Values

You probably don't really need to know all of the following, but again we include it for completeness. You might like to treat it as a reference resource, or read through it now to get an understanding of the basic issues, then refer for more detail when you need to.

Length Values

Length values can be positive or negative, have a numerical value, and are followed by a unit of measurement. Note that while length values can be either positive or negative, many properties cannot have negative length units.

There are two basic kinds of length unit, relative and absolute. As aril of thumb, absolute units should be used only when the physical characteristics of the output device are known

unit name	abbreviation	explanation	relative?
em	em	the height of a font	yes
ex	ex	the height of the letter x in a font	yes
pica	pc	1 pica is 12 points	no
point	pt	1/72 of an inch	no
pixel	px	one dot on a screen	yes
millimeter	mm	printing unit	no
centimeter	cm	printing unit	no
inch	in	printing unit	no

It is worth learning a little bit about each of these, as there are benefits and pitfalls in the use of each. The links section of our site has pointers to a number of interesting discussions about the use of different units.

Percentage Values

Instead of using a unit of measurement, for many properties you can use percentage value. If you cast your mind a way back to inheritance, you'll remember that a web element is contained within another web element (for example, a paragraph inside the body). Usually this value is a percentage of the parent, or container element.

For example, the width property, with a percentage value means the width of an elemental be the given percentage of the element which contains it. For instance, P {width: 75%} means that paragraphs will be 75% the width of their container. Very often this means the body.

Percentages are very valuable with positioning, as when a user resizes their window, the same basic layout can be achieved for the new window size.

The form of a percentage unit is a positive or negative s sign (no sign means positive units), followed by a number, followed be the percentage sign: %.

Color Values

Backgrounds, text and borders can be assigned colors. The color value can be one of three possibilities:

Color Keywords

There are 16 color keywords, taken from the windows color palette (that is why Mac users think they look so unattractive :-)

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.

There is no exactly defined rgb value for these keywords, it is up to the browser developers to decide what they might mean.

Hexadecimal RGB Colors

For whatever reason, the original web palette (officially sRGB) used hexadecimal (base 16 not base 10 numbers, and if you don't know, don't worry about it) numbers for specifying colors. Very quickly, the colors are specified as a combination of Red Green and Blue colors. There can be 256 different hues of each color, (from 00 to FF - that's 0 to 256 in human speak).

1) The # symbol, followed by three hexadecimal numbers in the range 00 to FF. For example, #FFCC11. This is the way HTML developers know how to specify color. In this example, the Red value is FF, the green value is CC and the blue value is 11.

2) The # symbol followed by three hexadecimal numbers, this time using a single digit. For example, #FC1. This is the same number as the one in the previous example, not the same as #F0C010.

RGB Colors

Because humans are more comfortable counting to 10 than 16, CSS lets us use decimal rgb values. The color gamut (the total range of colors) is exactly the same, we are just specifying it in a different way.

There are two forms of this value, a numerical and a percentage form. They are interchangeable.

1) The numerical form of the color value is the following rgb(255, 255, 0). There are three numerical values, in the range from 0 to 255, one each for red, green and blue.

2) The percentage form of the rgb color value replaces the values in the range from 0 to 255 with a percentage value from 0 to 100%. For example, the above value would be written rgb(100%, 100%, 0%).

url Values

Background images and list item images are specified with a url. This url can be either absolute (that is, the full url, e.g http://www.westciv.com/gifs/main.gif) or a relative path. But relative to what? If you were to think about it for a moment, you'd realize that it must be relative to the style sheet. Otherwise, the style sheet would only work for web pages in the same directory. The problem is that some versions of major browsers actually get this wrong, and treat the url as relative to the web page. Hopefully that has been rectified now in all major browsers.

Absolute URLs are written like this: url(http://www.westciv.com/gifs/main.gif)
Relative URLs, similarly, are written: url(../gifs/main.gif)

Keyword Values

A number of different properties can take keyword values. A key word value is simply a single word that is translated into a numerical value by a browser. Essentially, keyword values are relative. Some examples include:

Shape Values

The uncommon shape value (it is only used currently for the clip property, introduced as part of CSSP) defines a shape. At present, there is simply a rectangle shape.

Each of top, left, bottom and right can be either a length value, or the keyword auto. Auto means, at least in the clipping context, that the value of this position of the clip is the same as that of the element itself.

This value is probably going to be redefined because it doesn't follow the same basic model as the box model of CSS1, where element positions are defined by a top and left corner, along with a width and a height.

In this part

In this part we took a detour to concentrate a little more on the different kinds of value that properties can take. We'll return you to our regular tutorial now.

cascading style sheets guide